<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'CustomNavBar'
})
</script>

<template>
  <view class="custom-nav-bar">
    <!-- 导航栏内容 -->
    <view class="left">
      <slot name="left"></slot>
    </view>
    <view class="title">
      <slot></slot>
    </view>
    <view class="right">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<style scoped>
.custom-nav-bar {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 16px;
}

.left,
.right {
  width: 80px;
}
</style>